<template>
  <div>
    <el-table
      :data="userList"
      style="width: 100%"
      stripe
      border
      header-row-class-name="base-table-header-v3"
      row-class-name="base-table-row-v3"
      v-loading="loading"
    >
      <el-table-column
        :label="$t('common.label.name')"
        width="180px"
        show-overflow-tooltip
      >
        <div style="display: flex" slot-scope="scope">
          <a
            href="javascript:;"
            @click="goUserDetail(scope.row.userId)"
            class="view-detail-btn view-user-detail-btn"
          >
            <template v-if="isOpenData">
              <open-data type="userName" :openid="scope.row.staffId"></open-data>
            </template>
            <template v-else>
              {{ scope.row.displayName }}
            </template>
          </a>
          <i
            v-if="scope.row.isTeamLeader"
            class="iconfont icon-people"
          >{{ $t('common.label.leader') }}</i
          >
          <span
            v-if="scope.row.superAdmin == 2"
            class="super-admin-label"
          >{{ $t('common.label.admin') }}</span
          >
        </div>
      </el-table-column>
      <el-table-column :label="$t('common.label.accountNumber')" prop="loginName"></el-table-column>
      <el-table-column :label="$t('common.label.role')" show-overflow-tooltip>
        <template slot-scope="scope">{{
          scope.row.roles &&
            getProductLineRoleNames(scope.row.roles)
        }}</template>
      </el-table-column>
      <el-table-column :label="$t('common.label.phone')" prop="cellPhone" show-overflow-tooltip></el-table-column>
      <el-table-column :label="$t('common.label.weChat')" prop="wechat" show-overflow-tooltip></el-table-column>
      <el-table-column :label="$t('common.label.email')" prop="email" show-overflow-tooltip></el-table-column>
      <el-table-column prop="enabled" :label="$t('common.label.status')">
        <template slot-scope="scope">{{
          scope.row.enabled == 1 ? $t('common.base.enable') : $t('common.base.disable')
        }}</template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="base-pagination"
      :background="true"
      layout="total, prev, pager, next"
      :total="total"
      :page-size="pageInfo.pageSize"
      :current-page="pageInfo.pageNum"
      @current-change="jump"
    >
    </el-pagination>
  </div>
</template>

<script>
import { isOpenData, openAccurateTab } from '@src/util/platform'
import * as DeptHomeApi from "@src/api/DeptHomeApi";
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
/* util */
import { getProductLineRoleNames } from '@shb-lib/tenant'

export default {
  name: "dept-user-list",
  props: {
    detailId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isOpenData,
      userList: [], // 成员列表
      pageInfo: {
        // 分页
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // 总数
      loading: false
    };
  },
  mounted() {
    this.getDeptUserList();
  },
  methods: {
    getProductLineRoleNames,
    // 部门主页成员列表
    getDeptUserList() {
      this.loading = true;

      DeptHomeApi.getDeptUserList({
        keyword: "",
        tagId: this.detailId,
        seeAllOrg: true,
        ...this.pageInfo,
      }).then((res) => {

        this.userList = res.list;
        this.total = res.total;

        this.loading = false;
      }).catch(e=>{
        this.loading = false;
        console.error('fetch task caught e', e)
      })
    },
    jump(e) {
      this.pageInfo.pageNum = e;
      this.getDeptUserList();
    },
    /* 跳转 用户详情页 */
    goUserDetail(id) {
      if (!window.frameElement) return;

      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `tab_department_view_${id}`,
      //   title: '成员详情',
      //   close: true,
      //   reload: true,
      //   url: `/security/user/view/${id}?from=department`,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageSecurityUserView,
        key: id,
        params: 'from=department',
        reload: true,
        fromId
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.super-admin-label {
  background-color: #ff9f0c;
  color: #ffffff;
  padding: 1px 2px;
  margin-left: 3px;
  font-size: 10px;
}
.view-detail-btn {
  color: $color-primary-light-6;
  display: inline-block;
  min-width: 50px;
  // max-width: 140px;
  @include text-ellipsis();
}
.icon-people {
  font-size: 13px !important;
}
</style>